<template>
	<view class="myOrder">
		<view class="main">
			<view class="content" v-for="(item,index) in pageResult.list" :key="index">
				<view class="top"  @click="jump('pay_order_view', item.id)">
					<view class="state">
						<text>订单编号:{{item.order_sn}}</text>
						<text class="red fontbolder">{{item.order_status_name}}</text>
					</view>
					<view class="state" style="border-bottom: 1upx solid #ddd;">
						<view style="width: 10%;">
							<image :src="item.merchantPicture" mode="aspectFill" style="width: 50upx;height: 50upx;"></image>
						</view>
						<text style="width: 60%;">{{item.merchantName}}</text>
						<text style="width: 30%;" class="red">总金额：￥{{item.pay_money}}</text>
					</view>
					<view class="item" v-for="(product,index2) in item.product_list" :key="index2">
						<view class="right">
							{{product.product_name}}
						</view>
						<view class="right through">
							￥{{product.cost_money}}
						</view>
						<view class="right red">
							￥{{product.adjust_money}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
				<!-- <text>暂无记录～</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 4,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList() {
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/member/order/list',
						data: self.pageParam
					})
					.then(res => {
						console.log(res.data); 
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.myOrder {
		.main {
			.content {
				box-sizing: border-box;
				border-bottom: 16upx #F7F7FA solid;

				.top {
					box-sizing: border-box;
					padding-left: 30upx;
					border-bottom: 1upx #EBECF0 solid;

					.state {
						display: flex;
						font-size: 28upx;
						height: 96upx;
						align-items: center;
						justify-content: space-between;
						color: rgba(57, 72, 107, 0.5);
						padding-right: 30upx;
						box-sizing: border-box;
						border-bottom: 1upx rgba(204, 204, 204, 0.5) solid;
					}

					.item {
						display: flex;
						align-items: center;
						padding: 32upx 27upx 32upx 0upx;
						box-sizing: border-box;
						
						.right {
							width: 33.3%;
							font-size: 32upx;
							position: relative;
						}
						.through{
							text-decoration: line-through;
							text-align: center;
						}
					}
				}
			}
		}
		
		.red{
			color: #EB5938;
			text-align: right;
		}
		
		.fontbolder {
			font-weight: bolder;
		}
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:220upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
		
	}
</style>
